<script setup>
import { ref } from 'vue';
import { downloadFiles } from '@T2/utils/utils.ts';

const { content } = defineProps({
  content: {
    type: Object,
    required: true,
  },
});
const emits = defineEmits(['close']);
const visible = ref(true);

const closeClick = () => {
  emits('close', false);
}
</script>

<template>
  <div>
    <el-drawer v-model="visible" size="980" @close="closeClick()">
      <template #header>
        <div class="head-name">详情</div>
      </template>
      <template #default>
        <div class="content-box flex-column">
          <label class="box-header first">基本信息</label>
          <div class="grid-box">
            <div class="grid-item">
              <label>设备位号：</label>
              <span>{{ content.code }}</span>
            </div>
            <div class="grid-item">
              <label>设备名称：</label>
              <span>{{ content.name }}</span>
            </div>
            <div class="grid-item">
              <label>安装位置：</label>
              <span>{{ content.addr }}</span>
            </div>
            <div class="grid-item">
              <label>投运日期：</label>
              <span>{{ content.use_time }}</span>
            </div>
            <div class="grid-item">
              <label>维保周期：</label>
              <span>{{ content.cycle }}</span>
            </div>
            <div class="grid-item">
              <label>产品名称：</label>
              <span>{{ content.product_name }}</span>
            </div>
            <div class="grid-item">
              <label>规格型号：</label>
              <span>{{ content.product_gg }}</span>
            </div>
            <div class="grid-item">
              <label>品牌：</label>
              <span>{{ content.brand }}</span>
            </div>
            <div class="grid-item span3">
              <label>备注：</label>
              <span>{{ content.remark }}</span>
            </div>
            <div class="grid-item flex span2" v-if="content.files?.length">
              <label>产品资料：</label>
              <div class="flex-column">
                <div class="fj-item flex-sb-center" v-for="item in content.files_json">
                  <span class="fj-name">{{ item.name }}</span>
                  <el-button type="primary" link @click="downloadFiles(item.name, item.file_url)">下载</el-button>
                </div>
              </div>
            </div>
          </div>
          
          <label class="box-header">供应商信息</label>
          <div class="grid-box">
            <div class="grid-item">
              <label>厂商名称：</label>
              <span>{{ content.supplier_name }}</span>
            </div>
            <div class="grid-item">
              <label>联系人：</label>
              <span>{{ content.supplier_people }}</span>
            </div>
            <div class="grid-item">
              <label>联系电话：</label>
              <span>{{ content.supplier_phone }}</span>
            </div>
            <div class="grid-item span3">
              <label>地址：</label>
              <span>{{ content.supplier_addr }}</span>
            </div>
            <div class="grid-item span3">
              <label>说明：</label>
              <span>{{ content.supplier_info }}</span>
            </div>
          </div>
        </div>
      </template>
      <template #footer>
        <div style="flex: auto">
          <el-button type="primary" @click="closeClick()">关 闭</el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<style lang="scss" scoped>
.box-header {
  font-weight: 500;
  font-size: 16px;
  color: #4C4C4C;
  margin-top: 40px;
  margin-bottom: 24px;
  &.first {
    margin-top: 0;
  }
}
.grid-box {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  .grid-item {
    font-weight: 400;
    font-size: 14px;
    color: #111111;
    label {
      color: #666666;
    }
  }
  .span3 {
    grid-column: span 3;
  }
  .span2 {
    grid-column: span 2;
  }
  .fj-item {
    margin-bottom: 5px;
    border-bottom: 1px solid #e6e6e6;
    .fj-name {
      font-weight: 400;
      font-size: 14px;
      color: #1890FF;
      margin-right: 20px;
    }
    &:last-child {
      margin-bottom: 0;
    }
  }
}
</style>

<style scoped>
:deep(.el-drawer__body) {
  padding: 16px 24px;
}
:deep(.el-drawer__header) {
  height: 60px;
  padding-bottom: 10px;
  margin-bottom: 0;
  border-bottom: 1px solid #EDEFF3;
}
:deep(.el-drawer__header .head-name) {
  font-weight: 500;
  font-size: 20px;
  color: #252525;
}
</style>